<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工作牛</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6样式表 -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">
    <!-- Font Awesome 字体图标库 -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/font-awesome.min.css">
    <!-- 公共样式表 -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/common.css">
    <!-- 时间控件样式表 -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap-datetimepicker.css">
    <!-- jQuery 2.2.0 -->
    <script src="/javascripts/jQuery-2.2.0.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="/javascripts/bootstrap.min.js"></script>
    <script src="/javascripts/moment-with-locales.js"></script>
    <script src="/javascripts/bootstrap-datetimepicker.js"></script>

    <style type="text/css">
        /*/images/loading_box.png*/
        #loading{width:314px;height:130px;position:absolute;background:transparent url("/images/loading_box.png") no-repeat top left;text-align:center;z-index:1001;}
        #loading .loadingImg{margin-top:41px;margin-left:10px;}
        #whiteOverlay{position:absolute;width:100%;height:100%;background-color:white;top:0;left:0;opacity:.5;z-index:1000;filter:alpha(opacity=50)}
        #darkOverlay{position:fixed;_position:absolute;top:0;left:0;z-index:1003;background:transparent url("/images/bg_overlay.png") repeat top left;display:none;height:100%;width:100%;}
    </style>
</head>
<body>
<!-- 头部开始 -->
<div class="header">
    <!-- 头部左侧－logo -->
    <div class="logo">
        <img src="/images/logo.png" alt="logo"/>
        <span>工作牛后台服务系统</span>
        <span id="user_id" style="display:none"><%= user_id%> </span>
    </div>
    <!-- 头部右侧－退出按钮 -->
    <div class="header_right">
        <ul>
            <li>
                <a id="sign_out" href="#" data-toggle="control-sidebar"><i class="fa fa-power-off"></i></a>
            </li>
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-user"></i>
                    <%= name%>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 退出窗口 -->
<div class="signout_window">
    <div class="check_window">
        <p>您确认要退出登录？</p>
        <a href="javascript:logout()" class="btn_confirm">确定</a>
        <a href="#" class="btn_cancel">取消</a>
    </div>
</div>
<!-- 头部结束 -->
<!-- 收缩按钮 -->
<!-- <div class="shrink_box">
  <a id="btn_shrink" class="btn_shrink">
    <i class="fa fa-bars shrink_word"></i>
  </a>
</div> -->
<!-- 页面主体开始 -->
<div class="container">
    <!-- 工具栏 -->
    <div class="toolbar">
        <ul>
            <!-- <li>
              <a href="#" data-toggle="tooltip" data-placement="bottom" title="导出">
                <i class="glyphicon glyphicon-share toolbar_word"></i>
              </a>
            </li> -->
            <li>
                <a href="javascript:query()" id="btn_search" data-toggle="tooltip" data-placement="bottom" title="查询">
                    <i class="glyphicon glyphicon-search toolbar_word"></i>
                </a>
            </li>
        </ul>
    </div>
    <!-- 右侧内容 -->
    <div class="right_container">
        <div class="asdf container_content">
            <form action="" method="post" onsubmit="">
                <!-- 筛选条件开始 -->
                <div id="screen_condition" class="screen_condition screen_condition_show">
                    <div class="order_left">
                        <div class="order_source">
                            <ul>
                                <li>
                                    <label>姓名:</label>
                                    <input id="name" class="project_select" type="text" placeholder="请填写姓名"/>
                                </li>
                                <li>
                                    <label>起始日期</label>
                                </li>
                                <li>
                                    <label>结束日期</label>
                                </li>
                                <li>
                                    <label>部门</label>
                                    <select id='department' class="project_select">
                                        <option value="部门选择">请选择部门</option>
                                        <option value="部门01">部门01</option>
                                        <option value="部门02">部门02</option>
                                        <option value="部门03">部门03</option>
                                    </select>
                                </li>
                                <li>
                                    <label>供应商</label>
                                    <select id='company' class="project_select">
                                        <option value="供应商选择">请选择供应商</option>
                                        <option value="供应商01">供应商01</option>
                                        <option value="供应商02">供应商02</option>
                                        <option value="供应商03">供应商03</option>
                                    </select>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 筛选条件结束 -->
            </form>
            <!-- 表格开始 -->
            <div id="table_container" class="table_container">
                <table id="table" class="table_box" cellpadding="0" cellspacing="0">
                    <tr class="tab_title">
                        <th><input type="checkbox" value=""></th>
                        <th>姓名</th>
                        <th>绑定手机</th>
                        <th>部门</th>
                        <th>供应商</th>
                        <th>项目组</th>
                        <th>职能</th>
                        <th>城市</th>
                        <th>日期</th>
                        <th>签到时间</th>
                        <th>签退时间</th>
                        <th>签到地点</th>
                        <th>签退地点</th>
                        <th>缺勤状态</th>
                    </tr>
                    <tr class="tab_content">
                        <td colspan="17" style="width:100%;">
                            <div class="tbody_content">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tbody id="rows">
                                    <!--<tr class="content_line">-->
                                        <!--<td><input type="checkbox" value=""></td>-->
                                        <!--<td>宇文成都</td>-->
                                        <!--<td>18021417499</td>-->
                                        <!--<td>南京</td>-->
                                        <!--<td>皇家护卫锦衣卫</td>-->
                                        <!--<td>屠城小分队</td>-->
                                        <!--<td>第一小队</td>-->
                                        <!--<td>宇文家族有限公司</td>-->
                                        <!--<td>2017-07-02</td>-->
                                        <!--<td>08:56</td>-->
                                        <!--<td>17:38</td>-->
                                        <!--<td>南瑞信通公司</td>-->
                                        <!--<td>南瑞信通公司</td>-->
                                        <!--<td>否</td>-->
                                    <!--</tr>-->
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 表格分页 -->
            <div id="table_paging" class="table_paging">
                <nav>
                    <ul id="pageul" class="pagination">
                        <li id='leftArrow' class="disabled"><a href="#">&laquo;</a></li>
                        <!--<li class="active"><a href="#">1</a></li>-->
                        <!--<li><a href="#">2</a></li>-->
                        <!--<li><a href="#">3</a></li>-->
                        <!--<li><a href="#">4</a></li>-->
                        <!--<li><a href="#">5</a></li>-->
                        <!--<li><a href="#">6</a></li>-->
                        <!--<li><a href="#">7</a></li>-->
                        <!--<li><a href="#">8</a></li>-->
                        <!--<li><a href="#">9</a></li>-->
                        <!--<li><a href="#">10</a></li>-->
                        <li id='rightArrow' class="disabled"><a href="#">&raquo;</a></li>
                    </ul>
                </nav>
            </div>
            <!-- 表格结束 -->
        </div>
    </div>
</div>
<!-- 页面主体结束 -->
<!-- 时间控件开始 -->
<div class="input-group date date_control" id="datetimepicker10">
    <input id='date1' type="text" class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
        </span>
</div>
<div class="input-group date date_control_two" id="datetimepicker11">
    <input id='date2' type="text" class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
        </span>
</div>
<div id="loading" ><img class="loadingImg" alt="loading" src="/images/ajax-loader.gif"></div>
<div id="whiteOverlay"> </div>
<!-- 时间控件结束-->
<!-- 公共js表 -->
<script src="/javascripts/common.js"></script>
<script src="/javascripts/table-head-fixed.js"></script>
<script>

</script>
<script>
    var demo = [];
    demo.loading = function(){//定义显示loading的js方法
        $("#loading").css("left",($(window).width()-$("#loading").outerWidth())/2+$(window).scrollLeft()+"px");
        $("#whiteOverlay").css("height",document.body.clientHeight+"px");
        $("#whiteOverlay").css("width",document.body.clientWidth+"px");
        $("#loading").css("top",($(window).height()-$("#loading").outerHeight())/2+$(window).scrollTop()+"px");
        $("#loading").show();
        $("#whiteOverlay").show();
    };
    demo.hiding = function(){//定义隐藏loading的就是方法
        $("#loading").hide();
        $("#whiteOverlay").hide()
    };
    $(document).ready(function () {
        $("#datetimepicker10").datetimepicker({
            defaultDate:addMonth(new Date(), -1),
            viewMode: 'days',
            format: 'YYYY-MM-DD',
        });
        $("#datetimepicker11").datetimepicker({
            defaultDate:new Date(),
            viewMode: 'days',
            format: 'YYYY-MM-DD',
        });
        $("[data-toggle='tooltip']").tooltip();


        demo.hiding();//默认隐藏
        var user_id = document.getElementById('user_id').innerText;
        //部门
        $.ajax({
            type:"get",
            url:"/enquiry/department",
            data:{user_id: $.trim(user_id)},
            datatype: "json",
            success:function(data){
                var res = JSON.parse(data.response);
                if (res.code >= 1000) {
                    if (res.code === 1001) {
                        window.location.href = '/error?message=' + res.message;//跳转错误页面
                    } else {
                        alert(res.message);
                    }
                }
                else {
                    //动态section
                    var obj = document.getElementById('department');
                    obj.options.length = 0;
                    //添加一个选项
                    obj.add(new Option( "请选择部门" , "部门选择" ));
                    for (var i = 0 ; i < res.data.length; i++){
                        var department = res.data[i];
                        obj.add(new Option(department.name, department.department_id));
                    }
                }
            },
            error: function(){
                //请求出错处理
                window.location.href = '/error';
            }
        });
        //供应商
        $.ajax({
            type:"get",
            url:"/enquiry/company",
            data:{user_id: $.trim(user_id)},
            datatype: "json",
            success:function(data){
                var res = JSON.parse(data.response);
                if (res.code >= 1000) {
                    if (res.code === 1001) {
                        window.location.href = '/error?message=' + res.message;//跳转错误页面
                    } else {
                        alert(res.message);
                    }
                }
                else {
                    //动态section
                    var obj = document.getElementById('company');
                    obj.options.length = 0;
                    //添加一个选项
                    obj.add(new Option( "请选择供应商" , "供应商选择" ));
                    for (var i = 0 ; i < res.data.length; i++){
                        var company = res.data[i];
                        obj.add(new Option(company.name, company.other_company_id));
                    }
                }
            },
            error: function(){
                //请求出错处理
                window.location.href = '/error';
            }
        });
        // //起始日期和截止日期
        var date1 = document.getElementById('date1');
        date1.value = addMonth(new Date(), -1).format("yyyy-MM-dd");
        var date2 = document.getElementById('date2');
        date2.value = new Date().format("yyyy-MM-dd")
    });
    function logout () {
        $.ajax({
            type:"get",
            url:"/",
            datatype: "html",
            success:function(data){
                window.location.href = '/';
            } ,
            error: function(){
                window.location.href = '/error';
            }
        });
    }

    function query() {
       getDatas(0);
       getCounts();
    }
    function getDatas(page) {
        var user_id = document.getElementById('user_id').innerText;
        var name = document.getElementById('name').value;
        var startDate = document.getElementById('date1').value;
        var endDate = document.getElementById('date2').value;
        var department = document.getElementById('department').options[document.getElementById('department').selectedIndex].text;
        var company = document.getElementById('company').options[document.getElementById('company').selectedIndex].text;

        if(name === null || name === undefined || name.length <= 0) {
            alert('请输入姓名！');
            return;
        }
        if(dateValid() === false){
            alert("结束时间必须大于开始时间！");
            return;
        }
        demo.loading();//加载
        $.ajax({
            type:"get",
            url:"/enquiry/query",
            data:{user_id: $.trim(user_id), name: name, start: startDate, end: endDate, department: department, company: company, page: page},
            datatype: "json",
            success:function(data){
                demo.hiding();//消失
                var res = JSON.parse(data.response);
                if (res.code >= 1000) {
                    if (res.code === 1001) {
                        window.location.href = '/error?message=' + res.message;//跳转错误页面
                    } else {
                        alert(res.message);
                    }
                }
                else {
                   //成功写入html
                    var results = res.data;
                    var tbody = document.getElementById('rows');
                    tbody.innerHTML = null;
                    if (results.length > 0) {
                        for (var i = 0; i < results.length; i++) {
                            var object = results[i];
                            var status = object.缺勤状态;
                            if(object.缺勤状态 === null || object.缺勤状态 === undefined || object.缺勤状态.length <= 0)  {
                                status = '无';
                            }
                            var signTime = object.签到时间;
                            if(object.签到时间 === null || object.签到时间 === undefined || object.签到时间.length <= 0)  {
                                signTime = '无';
                            } else {
                                var date = new Date(signTime);
                                signTime = getTime(date);
                            }
                            var signoutTime = object.签退时间;
                            if(object.签退时间 === null || object.签退时间 === undefined || object.签退时间.length <= 0)  {
                                signoutTime = '无';
                            } else {
                                var date = new Date(signoutTime);
                                signoutTime = getTime(date);
                            }
                            var signPoint = object.签到地点;
                            if(object.签到地点 === null || object.签到地点 === undefined || object.签到地点.length <= 0)  {
                                signPoint = '无';
                            }
                            var signoutPoint = object.签退地点;
                            if(object.签退地点 === null || object.签退地点 === undefined || object.签退地点.length <= 0)  {
                                signoutPoint = '无';
                            }
                            var s = '<tr class="content_line"> <td>' + (i + 1) + '</td> <td>' + object.姓名 + '</td> <td>' + object.手机号 + '</td> <td>' + object.部门 + '</td> <td>' + object.供应商 + '</td> <td>' + object.项目组 + '</td> <td>' + object.职能 + '</td> <td>' + object.城市 + '</td> <td>' + object.日期 + '</td> <td>' + signTime + '</td> <td>' + signoutTime + '</td> <td>' + signPoint + '</td> <td>' + signoutPoint + '</td> <td>' + status + '</td> </tr>';
                            tbody.innerHTML += s;
                        }
                    }
                    else {
                        alert('暂无数据！');
                    }
                }
            },
            error: function(){
                demo.hiding();//消失
                //请求出错处理
                window.location.href = '/error';
            }
        });
    }

    function getCounts() {
        var user_id = document.getElementById('user_id').innerText;
        var name = document.getElementById('name').value;
        var startDate = document.getElementById('date1').value;
        var endDate = document.getElementById('date2').value;
        var department = document.getElementById('department').options[document.getElementById('department').selectedIndex].text;
        var company = document.getElementById('company').options[document.getElementById('company').selectedIndex].text;

        if(name === null || name === undefined || name.length <= 0) {
            alert('请输入姓名！');
            return;
        }
        if(dateValid() === false){
            alert("结束时间必须大于开始时间！");
            return;
        }
        $.ajax({
            type:"get",
            url:"/enquiry/count",
            data:{user_id: $.trim(user_id), name: name, start: startDate, end: endDate, department: department, company: company},
            datatype: "json",
            success:function(data){
                var res = JSON.parse(data.response);
                if (res.code >= 1000) {
                    if (res.code === 1001) {
                        window.location.href = '/error?message=' + res.message;//跳转错误页面
                    } else {
                        alert(res.message);
                    }
                }
                else {
                    //分页查询成功
                    var results = res.data;
                    var ul = document.querySelector("#pageul");
                    var lis = ul.querySelectorAll("li");
                    for (var i = lis.length - 1; i >= 0; i--) {
                        lis[i].remove();
                    }
                    $('#pageul').append('<li id="leftArrow"><a href="javascript:goPage(' + 0 + ')">&laquo;</a></li>');
                    for (var i = 0; i < results.count; i++) {
                        var s = null;
                        if (i === 0){
                            s = '<li class="active"><a href="javascript:goPage(' + i + ')">' + (i+1) + '</a></li>';
                        } else {
                            s = '<li><a href="javascript:goPage(' + i + ')">' + (i+1) + '</a></li>';
                        }
                        $('#pageul').append(s);
                    }
                    $('#pageul').append('<li><a href="javascript:goPage(' + (results.count - 1) + ')">&raquo;</a></li>');
                }
            },
            error: function(){
                //请求出错处理
                window.location.href = '/error';
            }
        });
    }

    function goPage(page) {
        getDatas(page)
        //遍历li
        var ularr= document.getElementById("pageul");
        var liarr= ularr.getElementsByTagName("li");
        for (var i = 0; i < liarr.length; i++){
            if(i !== 0 && i !== liarr.length - 1) {
                var li = liarr[i];
                if (i === page + 1){
                    addClassJS(li,'active');
                } else {
                    removeClassJS(li,'active');
                }
            }
        }
    }

</script>
</body>
</html>




